<template>
  <div style="width: 100%">
    <main>
      <div class="title">
        {{ data.title }}
      </div>
      <div style="width: 400px">
        <UserListItem v-if="data.user" :user-id="data?.user?.id" />
      </div>
      <div>{{ data.content }}</div>
      <Line />
      <div class="footer">
        <div class="paid" v-if="data.isPaid">
          <img :src="price" class="icon" />付费
        </div>
        <div
          class="like"
          @click="likeChange"
          :class="{ liked: data.user?.like }"
        >
          <img :src="data.user?.like ? likeSelect : like" />
          {{ data.user?.like ? "已点赞" : "点赞" }}
        </div>
        <div>{{ data.createAt }}</div>
      </div>
    </main>
    <div class="comment" v-if="data.status == Enums.ARTICLE_ENUMS.已发布">
      <div class="write-comment">
        <div class="avatar">
          <img
            :src="store.userInfo.avatar"
            style="width: 50px; height: 50px; border-radius: 50%"
          />
        </div>
        <div class="textarea">
          <textarea
            placeholder="发表评论"
            :rows="3"
            @focus="btnVisible = true"
            v-model="comment"
          ></textarea>
          <div class="btns" v-if="btnVisible">
            <div class="submit" @click="submit">发表</div>
            <div
              class="cancel"
              @click="
                btnVisible = false;
                comment = '';
              "
            >
              取消
            </div>
          </div>
        </div>
      </div>
      <div class="all-comment">
        <div class="all-comment-title">全部评论({{ data.commentCount }})</div>
        <div v-for="item in data.comments" class="all-comment-item">
          <div class="userInfo">
            <img
              :src="item.avatar"
              style="width: 50px; height: 50px; border-radius: 50%"
            />
            <div class="info">
              <div class="username">{{ item.userName }}</div>
              <div class="createAt">{{ item.createAt }}</div>
            </div>
          </div>
          <div class="content">{{ item.content }}</div>
          <Line />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import UserListItem from "@/components/UserListItem.vue";
import Line from "@/components/Line.vue";
import like from "@/assets/like.png";
import likeSelect from "@/assets/like_select.png";
import price from "@/assets/price.png";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { getArticleDetail, likeArticle } from "@/api/article";
import { useUserStore } from "@/stores/userStore";
const store = useUserStore();
import { writeComment } from "@/api/comments";
import Enums from "@/utils/Enums";
const route = useRoute();
const id = route.params.id;
const btnVisible = ref(false);
const comment = ref("");
const data = ref({});
const submit = async () => {
  await writeComment({
    articleId: id,
    userId: store.userInfo.id,
    content: comment.value,
  });
  btnVisible.value = false;
  comment.value = "";
  ElMessage.success("评论成功");
  getDteail();
};

const getDteail = async () => {
  const res = await getArticleDetail(id, store.userInfo.id);
  data.value = res.data.data;
};

getDteail();

const likeChange = async () => {
  await likeArticle({
    articleId: id,
    userId: store.userInfo.id,
  });
  data.value.user.like = !data.value.user.like;
  ElMessage.success("操作成功");
  getDteail();
};
</script>
<style lang="less" scoped>
main {
  width: 70%;
  margin: 20px auto;
  background-color: #fff;
  padding: 30px;
  .title {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 700;
  }
  .footer {
    color: #969696;
    display: flex;
    .like {
      display: flex;
      align-items: center;
      user-select: none;
      cursor: pointer;
      margin-right: auto;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
    .liked {
      color: #ec6149;
    }
    .paid {
      color: #ec6149;
      margin-right: 20px;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
  }
}
.comment {
  width: 70%;
  margin: 20px auto;
  background-color: #fff;
  padding: 30px;
  .write-comment {
    display: flex;
    align-items: flex-start;
    .avatar {
      margin-right: 20px;
    }
    .textarea {
      flex: 1;
      textarea {
        // 去掉默认样式
        border: none;
        outline: none;
        resize: none;
        width: 100%;
        background-color: #fafafa;
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 16px;
      }
      .btns {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
        .submit {
          background-color: #ec6149;
          color: #fff;
          padding: 5px 10px;
          border-radius: 5px;
          margin-left: 10px;
          cursor: pointer;
        }
        .cancel {
          .submit;
          background-color: #fff;
          color: #555;
          border: 1px solid #777;
        }
      }
    }
  }
}
.all-comment {
  margin-top: 30px;
  .all-comment-title {
    margin-bottom: 20px;
    border-left: 4px solid #ec6149;
    padding-left: 10px;
  }
  .all-comment-item {
    .content {
      padding: 10px 0;
    }
    .userInfo {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      img {
        margin-right: 20px;
      }
      .info {
        .username {
          font-size: 18px;
        }
        .createAt {
          font-size: 14px;
          color: #969696;
        }
      }
    }
  }
}
</style>
